JavaScript面试基础小结(高手请无视)

事件委托

ul#wrap>li.item$*2>{item $}

得到如下

html<ul id="wrap">
    <li class="item1">item 1</li>
    <li class="item2">item 2</li>
</ul>

一个监听，多个函数绑定

js document.getElementById('wrap').addEventListener("click", function(e) {
        if (e.target.nodeName === "LI") {
            console.log("ok");
            switch(e.target.className){
                case "item1":
                    f1();
                    break;
                case "item2":
                    f2();
                    break;
                default:
                    alert("not a li node");
            }
        };
    },false)

    function f1(){
        alert("f1");
    }

    function f2(){
        alert("f2");
    }

JSONP

标签的src属性并不被同源策略(同协议、域名、端口)所约束，所以可以获取任何服务器上脚本并执行。ajax的核心是通过XmlHttpRequest获取非本页内容，而jsonp的核心则是动态添加<script>标签来调用服务器提供的js脚本。

以上是网上摘抄，根据自己的理解写下如下代码

js//jsonp.html

 function getName(data){

            console.log(data.name);

        }

        var scriptP = document.createElement("script");

        scriptP.src = "http://localhost:8000/reponse.php?id=1&&callback=getName";

        window.onload=function(){
            document.body.appendChild(scriptP);
        }   

php文件如下

php//reponse.php
<?php
    $getId = $_GET["id"];
    $getCalFun = $_GET["callback"];

    $json = array(
       "id" => $getId,
       "name" => "zhangsan"
    );

   echo $getCalFun+'('+json_encode($json)+')';
?>

但却报错了Uncaught SyntaxError: Unexpected token <，不知道哪里出错了，往大婶指出...

原理很简单，客户端获取数据根据需求动态添加script，并使jsonp的服务端拼接脚本触发函数。

This

jsvar ob = {};

ob.x = 1;
ob.f = function(){
    this.x = 2;
}
ob.f();

console.log(ob.x); // => 2

从上面的代码可以得知，this是引用对象，而且是可以更改指定的对象。

主要应用有两种call和apply

js
        function change(s,v){
            if(s > v){
                console.log("s >v");
            }else{
                console.log(" s < v");
            }
        }
        change.call(2,3);// 当前this 指向window
        ...
        function changeColor(s,v){
            this.style.s = v;
        }

        var box = document.querySelector(".box");

        changeColor.call(box, "backgroundcolor" , "blue"); //当前this指向changeColor

call和apply的区别只是apply只接受两个参数，第二个参数是数组形式。

疑问：

jsvar obj = {
    x : 100,
    y : function(){
        setTimeout(
            function(){ alert(this.x); }    //这里的this指向的是window对象，并不是我们期待的obj,所以会弹出undefined
         , 2000);
    }
};

obj.y();

上面是刚开始遇到的疑问

后来经指点,一段代码理解问题

jswindow.setTimeout();

解决方法:

...
y.function(){
    var that = this;
    setTimeout(
        function(){
            alert(that.y);  //既然setTimeout指向的是window，我们把它换了就ok
        }
        ,2000)
}
...

以上代码摘自: http://www.cnblogs.com/rainman/archive/2009/05/03/1448392.html

前端模块化的AMD和CMD

网上已经有很多关于这方面的对比。我只写一下我的理解。

AMD：加载速度快，它是异步加载，预先加载所有资源（这也是缺点？）。

CMD：服务器端模块的规范，同步加载，加载完后才能执行后面的操作。

AMD一般适用于浏览器，CMD则适用于本地或者服务器，例如nodejs就是采用这种模块化(npm)。

圣杯布局

初次听说这个，后来网上一搜，原来也就那么一回事

http://www.elonglau.com/33.html

如果是我的话，我会采用flex了。

Cache-Control

这个只是简单了解，没做深入，好的博客推荐看这里

http://www.cnblogs.com/TankXiao/archive/2012/11/28/2793365.html

主要了解了 HTTP状态码

1. 1XX表示请求接受成功，待进一步处理
2. 2XX表示访问成功
3. 3XX 访问重定向
4. 4XX 客户端请求错误，包括语法、文件路径
5. 5XX 服务器出现错误

常见的有

200访问成功，302 访问重定向(google.com转到google.com.hk)，304缓存，404页面不存在。

我记不住的：

400 Bad Request，请求出现语法错误。
403 Forbidden，服务器拒绝请求。
500 服务器发生了不可预知的错误
503 服务器当前无法接受请求，请等待一段时间

304

对于304缓存，主要有两个标识判断是否需求请求新的文件:

1. Etag
2. 缓存文件的时间和服务器文件最后一次修改的时间

Cache-Control

Cache-Control常见的参数:

1. public 所有用户均可使用（缓存在服务器上）
2. private 单个用户专用
3. no-cache 所有页面都不能缓存
4. max-age 多少时间不会去访问服务器

参数可以参考: http://fanli7.net/a/bianchengyuyan/C__/20130120/294176.html

JavaScript继承实现

可以直接看阮一峰老师的文章

http://www.ruanyifeng.com/blog/2011/06/designing_ideas_of_inheritance_...

未写:

1. 继承有好几种方式(待写一个YUI继承方式)
2. 拖拽实现
3. JavaScript基础算法
4. Javascript动画算法